<template>
  <div class="home">
    <div class="container">
      <!--   轮播部分   -->
      <div class="item-1">
        <div class="carousel">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in HomeAdvertiseList" :key="item.id">
              <transition name="fade-in-up">
                <div class="title" v-show="true">
                  <el-row>立即订购可享受高达25%折</el-row>
                  <el-row style="margin: 10px 0;">可享受折扣</el-row>
                  <a :href="item.url ? item.url : '#'" class="btn-shop-product">
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;">立即购买</font>
                    </font>
                  </a>
                </div>
              </transition>
              <div class="image" :style="{ backgroundImage: `url(${item.pic})` }"></div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="new_hot_pro">
          <div class="newPro">
            <div class="title">最新商品</div>
            <div class="image">
              <el-image :src="newProduct.defaultImg" fit="cover" :preview-src-list="[newProduct.defaultImg]"
                        style="width: 100%; height: 100%;"/>
            </div>
            <div class="bottom_title">
              <div @click="$router.push({path: '/prductDetail', query: {id: newProduct.id}})">查看详情</div>
              <div>立即购买</div>
            </div>
          </div>

          <div class="hotPro">
            <div class="title">最热商品</div>
            <div class="image">
              <el-image :src="hotProduct.defaultImg" fit="cover" :preview-src-list="[hotProduct.defaultImg]"
                        style="width: 100%; height: 100%;"/>
            </div>
            <div class="bottom_title">
              <div  @click="$router.push({path: '/prductDetail', query: {id: hotProduct.id}})">查看详情</div>
              <div>立即购买</div>
            </div>
          </div>
        </div>

      </div>

      <!--   我的产品部分   -->
      <div class="item-2">
        <div class="my_product">
          <div class="title">我们的产品
            <div style="width: 50px;margin: 0 auto;border: 2px solid rgb(138, 182, 96)"></div>
          </div>
          <div class="tag">
            <div v-for="(item,index) in tagList" :key="index" class="tag_item" :class="{'color': tagByColor == index}"
                 @click="tag(index)">
              {{ item }}
            </div>
          </div>
          <!--         组件  -->
          <ProductCart :products="MyProductList" :type="type"></ProductCart>
        </div>
      </div>
    </div>
      <!--    广告部分    -->
    <ServiceFeatures></ServiceFeatures>

<!-- 我们的品牌   -->
    <div class="container">
      <BrandCarouselSection></BrandCarouselSection>
    </div>
  </div>
</template>

<script>
import ProductCart from "@/components/home/ProductCart";
import ServiceFeatures from "@/components/home/ServiceFeatures";
import BrandCarouselSection from "@/components/home/BrandCarouselSection";

export default {
  name: 'Home',
  components: {
    ProductCart,
    ServiceFeatures,
    BrandCarouselSection
  },
  data() {
    return {
      //轮播图数据
      HomeAdvertiseList: [],
      newProduct: {},
      hotProduct: {},
      tagList: [
        "新品上市", "最佳热销"
      ],
      tagByColor: 0,
      type: 'new',
      MyProductList: []
    }
  },
  mounted() {
    //  获取轮播图
    this.getHomeAdvertiseList()
    this.getMyProductList()
  },
  methods: {
    getHomeAdvertiseList() {
      this.$api.home.getHomeAdvertise().then(res => {
        if (res.code == 200) {
          this.HomeAdvertiseList = res.data.homeAdvertise
          this.newProduct = res.data.homeNewProduct
          this.hotProduct = res.data.homeRecommendProduct
        }
      })
    },
    tag(index) {
      this.tagByColor = index
      if (index == 0) {
        this.type = "new"
      } else {
        this.type = "hot"
      }
      this.getMyProductList()
    },
    getMyProductList() {
      this.$api.home.getProductList(this.type).then(res => {
        if (res.code == 200) {
          this.MyProductList = res.data
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
//上部分-1
.item-1 {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;

  .carousel {

    /deep/ .el-carousel__container {
      height: 670px;
      width: 780px;
      position: relative;
      background: rgb(245, 245, 245);

      .image {
        height: 670px;
        width: 780px;
        background-size: 100% 100%;
        z-index: 5;
      }

      .title {
        position: absolute;
        top: 270px;
        left: 110px;

        div:nth-child(1) {
          font-size: 30px;
          font-weight: 500;
        }

        .btn-shop-product {
          display: inline-block;
          padding-top: 7px;
          padding-bottom: 7px;
          padding-right: 0;
          padding-left: 0;
          background: 0;
          border: 1px solid transparent;
          color: #000;
          margin-right: 5px;
          border-radius: 0;
          position: relative;
          overflow: hidden;
          z-index: 1;
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }

  .new_hot_pro {
    height: 670px;
    width: 370px;

    .newPro {
      height: 330px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;

      .title {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 80px;
        z-index: 1000;
        background: rgb(138, 182, 96);
        border-radius: 10px;
        font-size: 14px;
        line-height: 20px;
        color: white;
      }

      .image {
        height: 300px;
        width: 100%;
        background: #00afff;
      }

      .bottom_title {
        display: flex;
        justify-content: space-between;
        justify-items: center;

        div {
          width: 50%;
          cursor: pointer;
        }

        div:nth-child(1) {
          background: rgb(138, 182, 96);
          color: #fff;
          text-align: center;
          line-height: 30px;

          &:hover {
            background: #fff;
            color: #000;
          }
        }

        div:nth-child(2) {
          background: rgb(138, 182, 96);
          color: white;
          text-align: center;
          line-height: 30px;

          &:hover {
            background: #fff;
            color: #000;
          }
        }
      }
    }

    .hotPro {
      margin: 8px 0;
      height: 330px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;

      .title {
        position: absolute;
        top: 0;
        left: 0;
        height: 20px;
        width: 80px;
        z-index: 1000;
        background: rgb(138, 182, 96);
        border-radius: 10px;
        font-size: 14px;
        line-height: 20px;
        color: white;
      }

      .image {
        height: 300px;
        width: 100%;
        background: #00afff;
      }

      .bottom_title {
        display: flex;
        justify-content: space-between;
        justify-items: center;

        div {
          width: 50%;
          cursor: pointer;
        }

        div:nth-child(1) {
          background: rgb(138, 182, 96);
          color: #fff;
          text-align: center;
          line-height: 30px;

          &:hover {
            background: #fff;
            color: #000;
          }
        }

        div:nth-child(2) {
          background: rgb(138, 182, 96);
          color: white;
          text-align: center;
          line-height: 30px;

          &:hover {
            background: #fff;
            color: #000;
          }
        }
      }
    }


  }
}

//上部分-2
.item-2 {
  width: 100%;
  //min-height: 1000px;
  //border: 1px solid red;
  //background: rgb(245, 245, 245);
  .my_product {
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;

    .color {
      color: white !important;
      background: rgb(138, 182, 96) !important;
    }

    .title {
      width: 100%;
      height: 37px;
      line-height: 43px;
      text-align: center;
      font-size: 24px;
      //font-weight: 700;
    }

    .tag {
      display: flex;
      justify-items: center;
      justify-content: center;
      height: 40px;
      width: 100%;
      margin-top: 30px;

      .tag_item {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 30px;
        cursor: pointer;
        font-weight: 700;
        background: rgb(245, 245, 245);
        margin: 0 10px;
      }
    }
  }
}

/* 定义动画 */
.fade-in-up-enter-active {
  animation: fadeInUp 1s;
}

.fade-in-up-leave-active {
  animation: fadeInUp 1s reverse;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>